<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器示例</title>
    <script src="../js/vue.js"></script>

</head>
<body>
<div id="app" style="text-align: center;margin-top: 30px">
    <div><input v-model="msg" style="height: 80px;font-size: 50px;width: 700px"></div>
    <div>
        <button @click="clickNum(1)">1</button>
        <button @click="clickNum(2)">2</button>
        <button @click="clickNum(3)">3</button>
        <button @click="clickAdd">+</button>
        <button @click="clickEql">=</button>
    </div>
</div>


</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "",
            num1: 0,//保存第一个要运算的数字
            num2: 0,//保存第二个要运算的数字
        },
        methods: {
            // clickOne(){
            //     this.msg += 1;
            // },
            // clickTwo(){
            //     this.msg += 2;
            // }
            clickNum(val) {
                this.msg += val;
            },
            clickAdd(){//当点击运算符号时，则表示我们要计算的第一个数字就写完了，所以要将它保存起来
                this.num1 = this.msg;
                //把值赋完之后，输入框中的内容，应该要清空掉
                this.msg = "";
            },
            clickEql(){
                //当点了等号时，表示第2个数字就输入完成
                this.num2 = this.msg;
                //再将2个数字进行运算
               this.msg =  parseInt(this.num1) + parseInt(this.num2)
            }
        }
    })

</script>
<!--  如果要给html中的某类标签统一添加样式，则按如下方式设置-->
<style>
    button {
        width: 100px;
        height: 100px;
        font-size: 50px;
        font-weight: bolder;
        margin: 10px;
    }
</style>
</html>